<template>
  <div class="shop">
    <div class="item" v-for="item in arr" :key="item.id">
      <van-checkbox
        v-model="item.checked"
        checked-color="pink"
        class="checkbox"
        @click="changeone"
      ></van-checkbox>
      <van-swipe-cell>
        <van-card
          :title="item.goodsname"
         :thumb="$pre + item.img"
         desc="价格："
        >
           <div slot="price">单价￥:{{item.price}}</div>
           <div slot="price">合计￥:{{item.price*item.num}}</div>
          <div slot="num">
            <van-button type="primary" @click="jian(item.id, item.num)"
              >-</van-button
            >
            <i class="num">{{ item.num }}</i>
            <van-button type="primary" @click="add(item.id)">+</van-button>
          </div>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            @click="del(item.id)"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 暂无数据 -->
     <van-empty v-if="arr.length===0" description="暂无数据" />
    <!-- 底部 -->
    <div class="footer">
      <van-checkbox v-model="allChecked" @click="changeAll" shape="square" class="checkbox"
        >全选</van-checkbox
      >
      <div class="allPrice">合计{{allPrice}}</div>
      <van-button type="danger" @click="toorder">结算</van-button>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import { shoplist, reqshopedit, reqshopdel } from "../../http/http";
export default {
  data() {
    return {
      arr: [],
      checked: false,
      allChecked: false,
    };
  },
  mounted() {
    //   防抖节流 用来作开关 处理加减的bug 发请求为异步操作
    //  用户连点发请求响应 导致出现用户上一次请求还没做完用户再次请求 num没重新渲染此时num还不是小于一于是但是请求两下导致页面来不及渲染就出现num小于一的情况
    // 开关 如果是true就能发请求 为false就不能
    this.isrequest = true;
    // 调用init请求数据
    this.init();
  },
  methods: {
    //   封装请求列表数据
    init() {
      //   请求列表数据
      shoplist(
        {
           uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        }
      ).then((res) => {
        // 全选
        let arr=res.data.list?res.data.list:[]
        // res.data.list.push("checked")
          //   每个数据增加checked属性
        arr.forEach((item) => {
            // 原数组id等于现数据的item当前项的id
        let obj=this.arr.find(i=>i.id==item.id)
        // find返回满足条件数据 无 返回underfind
          item.checked =obj? obj.checked:false;

        });
        
        this.arr = arr;
        // 全选赋值
        this.allChecked=this.arr.every((item)=>item.checked)
        //  打开开关 下次请求
        this.isrequest = true;
        //   console.log(this.arr);
      });
    },
    //   点击+购物车修改数据
    add(id) {
      reqshopedit({
        id,
        type: 2,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    //   点击——购物车修改数据
    jian(id, num) {
      // 做出判断num<0则不做请求
      if (num <= 1) {
        Toast("宝贝不能再少了");
        return;
      }
      if (this.isrequest) {
        //    关掉开关等一次请求完成页面重新刷
        this.isrequest = false;
        // 发送请求请求数据
        reqshopedit({
          id,
          type: 1,
        }).then((res) => {
          if (res.data.code == 200) {
            // 弹出成功信息
            Toast(res.data.msg);
            // 重新请求渲染数据
            this.init();
          }
        });
      }
    },
    del(id) {
        // 确认是否删除
      Dialog.confirm({
        title: "看清楚",
        message: "你确定要删除忙",
      })
        .then(() => {
            // 成功操作删除
               reqshopdel({id}).then((res) => {
                 Toast(res.data.msg)

                 this.init()
               });
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
   
    },
    // 全选
       changeAll(){
           this.arr.forEach((item)=>{
                item.checked=this.allChecked
           })
       },
    //    一个不选全选不选
    changeone(){
        this.allChecked=this.arr.every((item)=>{
           return item.checked
        })
     
    },
    // 结算
    toorder() {
      /* countmoney:总价 countnumber：总数量 idstr:购物车id*/
      let json = {
        countmoney: this.allPrice,
        countnumber: this.arr.reduce(
          (val, item) => (item.checked ? val + item.num : val),

          0
        ),
        idstr: this.arr.reduce(
          (val, item) => (item.checked ? val + "," + item.id : val),
          ""
        ).slice(1),
      };
      console.log(json);
      //存起来购物车计算出来的数据
      localStorage.setItem("shopInfo",JSON.stringify(json))
      //跳转订单
      this.$router.push("/order")
    },
  },
      
  
     computed: {
    //9.总价
    allPrice() {
      return this.arr.reduce(
        (val, item) => (item.checked ? val + item.price * item.num : val),
        0
      );
    },
  },
};
</script>
<style scoped>
.item {
  position: relative;
}
.item .checkbox {
  position: absolute;
  left: 4%;
  top: 40%;
  transform: translate(-50%);
  z-index: 9999;
}
.num {
  line-height: 0.44rem;
}
.footer {
  height: 0.8rem;
  position: fixed;
  left: 0;
  bottom: 1.01rem;
  background: #fff;
  width: 100vw;
  border-top: 1px solid #ccc;
}
.footer .van-checkbox {
  float: left;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.footer .allPrice {
  float: left;
  margin-left: 0.5rem;
  line-height: 0.8rem;
}
.footer .van-button {
  float: right;
}
.delete-button {
  height: 100%;
}
</style>